<template>
  <div class="login_view">
    <div class="header">
      <div class="log_title">
        <h2>后台管理系统</h2>
        <span>Background Management System</span>
      </div>
    </div>
    <div class="context">
      <el-form
        v-loading.fullscreen.lock="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :model="form"
        :rules="relus"
        ref="form"
        label-width="100px"
        class="login-container animate__animated animate__flipInX">
        <h3 class="login-title">登入</h3>
        <el-form-item
          label="账户"
          label-width="80px"
          prop="loginname"
          class="loginname">
          <el-input
            type="input"
            v-model="form.loginname"
            placeholder="请输入账户名">
          </el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80px" prop="password">
          <el-input
            type="password"
            v-model="form.password"
            placeholder="请输入密码">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" class="login-submit">
            登录</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      flag: false,
      loading: false,
      form: {
        loginname: "admin",
        password: "123456",
      },
      relus: {
        loginname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, message: "用户名不能少于3位", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码不能少于6位", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async login() {
      var logSize = this.form.loginname.length;
      var pasSize = this.form.password.length;
      if (logSize >= 3 && pasSize >= 6) {
        this.loading = true;
        /** 发送请求 */
        await this.$axios
          .post(this.$store.state.address.url + "/LoginSys", this.form)
          .then((response) => {
            this.loading = false;
            this.flag = response.data;
            if (this.flag == true) {
              this.loding = false;
              window.sessionStorage.setItem("token", this.form.loginname);
              this.$router.push("/main");
            } else {
              this.loading = false;
              this.$message.error("用户名或密码错误");
            }
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        this.$message.warning("输入的内容非法，请重试！！！");
      }
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    },
  },
};
</script>

<style scoped lang="less">
body,
html {
  margin: 0;
  padding: 0;
  height: 100vh;
}
.login_view {
  display: flex;
  height: 100vh;
  flex-direction: column;
}
.header {
  height: 120px;
  background-color: white;
}
.log_title {
  width: 300px;
  height: auto;
  margin-left: 60px;
  text-align: center;
}
.context {
  background-color: aqua;
  flex: 1;
  background-image: url(../../assets/loginBGI.jpg);
  background-position: center right;
}
.footer {
  height: 150px;
  background-color: white;
}
.login-container {
  border-radius: 15px;
  background-clip: border-box;
  margin-top: 80px;
  margin-left: 65%;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background-color: white;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cacac6;
}
.login-title {
  text-align: center;
  color: #3c3c3c;
}
.login-submit {
  margin: 10px auto;
}
</style>